<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bootstrap 实例 - 边框表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .search {

      height: 70px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      background-color: #ffffff;
      margin-bottom: 10px;
    }

    .search>div {
      margin-right: 30px;
    }
  </style>
</head>

<body>
  <div class="search">
    <div class="input-group">
      <label class="input-group-addon">名称：</label><input type="text" class="form-control " name=""
        id="searchIdentification" placeholder="请输入">
    </div>
    <div class="input-group">
      <label class="input-group-addon">城市：</label><input type="text" class="form-control " name="" id="searchDepartment"
        placeholder="请输入">
    </div>
    <div>
      <button id="searchBtu" class="btn btn-success btn-sm" style="margin-right: 15px;">搜索</button>
      <button id="reset" class="btn btn-default btn-sm">重置</button>
    </div>
    </div>
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal2">增加</button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              是否删除
            </h4>
          </div>
          <div class="modal-body">
            确定删除
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default close1" data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary remove">
              确定
            </button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">修改</h4>
          </div>
          <div class="modal-body">
            <div class="input-group1">
              <label>名称：</label><input type="text" class="form-control" name="" id="name1" placeholder="请输入">
            </div>
            <div class="input-group1">
              <label>城市：</label><input type="text" class="form-control" name="" id="city1" placeholder="请输入">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="box1" type="button" class="btn btn-primary">确认修改</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">新增</h4>
          </div>
          <div class="modal-body">
            <div class="input-group1">
              <label>名称：</label><input type="text" class="form-control" name="" id="name" placeholder="请输入">
            </div>
            <div class="input-group1">
              <label>城市：</label><input type="text" class="form-control" name="" id="city" placeholder="请输入">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button id="box2" type="button" class="btn btn-primary">确认增加</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <script>
      const data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
        { id: 3, name: "张三", city: "成都" },
        { id: 4, name: "张三", city: "成都" },
      ];
      let copyData = $.extend(true, [], data)
      //渲染
      function tableTbody(data) {
        $("tbody").empty();
        for (let i = 0; i < data.length; i++) {
          $("tbody").append(`
      <tr>
          <td>${data[i].name}</td>
          <td>${data[i].city}</td>
          <td>
            <button data-id='${data[i].id}' type="button" class="btn btn-danger btn-remove" data-toggle="modal" data-target="#myModal">删除</button>
            <button data-id='${data[i].id}' type="button" class="btn btn-info confirm" data-toggle="modal" data-target="#myModal1">修改</button>
          </td>
        </tr>
      `)
        }
      }
      //搜索
      $("#searchBtu").on("click", function () {
            let searchName = $("#searchName").val()
            let searchIdentification = $("#searchIdentification").val()
            let searchDepartment = $("#searchDepartment").val()
            let searchData = []
            if (searchIdentification === "" && searchDepartment === "") {
              tableTbody(data)
                return
            }
            for (let i = 0; i < copyData.length; i++) {
                if (copyData[i].name.includes(searchIdentification) && copyData[i].city.includes(searchDepartment)) {
                    searchData.push(copyData[i])
                }
            }
            data = searchData;
            tableTbody(searchData)
        })
        //重置
        $("#reset").on("click", function () {
            $("#searchName").val("")
            $("#searchIdentification").val("")
            $("#searchDepartment").val("")
            tableTbody(data)
        })
      //删除
      $("tbody").on("click", ".btn-remove", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"))
        $(".remove").on("click", function () {
          for (let i = 0; i < data.length; i++) {
            if (dataId === data[i].id) {
              data.splice(i, 1)
              tableTbody(data)
              $('#myModal').modal('hide')
            }
          }
        })
      })
      $(".close1").on("click", function () {
        $('#myModal').modal('hide')
      })

      //新增
      $("#box2").on("click", function () {
        let name1 = $("#name").val()
        let city1 = $("#city").val()
        let obj = {
          id: data.length + 1,
          name: name1,
          city: city1,
        }
        if (name1 !== "" && city1 !== "") {
          data.push(obj)
          tableTbody(data)
          $('#myModal2').modal('hide')
        } else {
          return
        }
      })
      //修改
      $("tbody").on("click", ".confirm", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"))
        for (let i = 0; i < data.length; i++) {
          if (dataId === data[i].id) {
            $("#name1").val(`${data[i].name}`)
            $("#city1").val(`${data[i].city}`)
          }
        }
        $("#box1").on("click", function () {
          for (let i = 0; i < data.length; i++) {
            if (dataId === data[i].id) {
              data[i].name = $("#name1").val()
              data[i].city = $("#city1").val()
            }
          }
          tableTbody(data)
          $('#myModal1').modal('hide')
        })
      })
      tableTbody(data)
    </script>
</body>

</html>